import React,{Component} from 'react';
import { withRouter } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import home from '../images/home.png';
import homeAct from '../images/home-act.png';
import find from '../images/find.png';
import findAct from '../images/find-act.png';
import order from '../images/order.png';
import orderAct from '../images/order-act.png';
import mine from '../images/mine.png';
import mineAct from '../images/mine-act.png';
class Tab extends Component{
    state={
        selectedTab:'home'
    }
    render(){
        return (
            <div className="yyb_bottom_tab">
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor="#33A3F4"
                        barTintColor="white"
                        tabBarPosition="bottom"
                    >
                        <TabBar.Item
                            title="首页"
                            key="home"
                            icon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${home}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selectedIcon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${homeAct}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selected={this.state.selectedTab === 'home'}
                            onPress={() => {
                                this.props.history.push('/');
                                this.setState({
                                    selectedTab: 'home',
                                });
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            title="发现"
                            key="find"
                            icon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${find}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selectedIcon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${findAct}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selected={this.state.selectedTab === 'find'}
                            onPress={() => {
                                this.props.history.push('/find');
                                this.setState({
                                    selectedTab: 'find',
                                });
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            title="订单"
                            key="order"
                            icon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${order}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selectedIcon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${orderAct}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selected={this.state.selectedTab === 'order'}
                            onPress={() => {
                                this.props.history.push('/order');
                                this.setState({
                                    selectedTab: 'order'
                                });
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            title="我的"
                            key="mine"
                            icon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${mine}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selectedIcon={<div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${mineAct}) center center /  21px 21px no-repeat`
                            }}
                            />
                            }
                            selected={this.state.selectedTab === 'mine'}
                            onPress={() => {
                                this.props.history.push('/mine');
                                this.setState({
                                    selectedTab: 'mine',
                                });
                            }}
                        >
                        </TabBar.Item>
                    </TabBar>
                </div>
        )
    }
}
export default withRouter(Tab);